<template>
      <div>
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-input v-model="formInline.condition" placeholder="请输入专业编号"  style="width: 180px"></el-input>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary" @click="AddMajorVisible = true"  >新增专业</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              type="index"
              label="编号"
              >
            </el-table-column>
            <el-table-column
              prop="majorId"
              label="专业编号"
              >
            </el-table-column>
            <el-table-column
              prop="majorCreateDate"
              label="专业创建时间"
                :formatter="dateFormat">
            </el-table-column>
            <el-table-column
              prop="majorAcademic"
              label="学制">
            </el-table-column>
            <el-table-column
              prop="majorProfile"
              label="简介">
            </el-table-column>
            <el-table-column
              prop="majorTotalCredit"
              label="总学分">
            </el-table-column>
            <el-table-column label="操作" >
                  <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size='small' @click.native="majormanageSelid(scope.row.majorId)"></el-button>
                    <el-button type="primary" icon="el-icon-delete" size='small' @click.native="majormanageDelid(scope.row.majorId)"></el-button>
                  </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog
          title="提示"
          :visible.sync="dialogVisibleUp"
          width="30%"
          >
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="专业学制">
              <el-input type="text" v-model="form.majorAcademic" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="专业简介" >
              <el-input type="text" v-model="form.majorProfile" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('form')">提交</el-button>
            <el-button @click="dialogVisibleUp = false">取 消</el-button>
          </span>
        </el-dialog>


        <el-dialog
          title="提示"
          :visible.sync="AddMajorVisible"
          width="30%">
          <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
              <el-form-item label="专业学制" prop="majorAcademic" required>
                <el-input type="text" v-model="ruleForm2.majorAcademic" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="专业学分" prop="majorTotalCredit" required>
                <el-input type="text" v-model="ruleForm2.majorTotalCredit" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="专业简介" prop="majorProfile" required>
                <el-input type="text" v-model="ruleForm2.majorProfile" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitFormAdd('ruleForm2')">提交</el-button>
                <el-button @click="resetForm('ruleForm2')">重置</el-button>
              </el-form-item>
          </el-form>
        </el-dialog>



        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageIndex"
            :page-size="pageSize"
            layout="total,prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

      </div>

</template>

<style>
.el-table th{
  text-align: center;
}
</style>

<script>
import {majormanageFy} from '@/axios/api'
import {majormanageDel} from '@/axios/api'
import {majormanageSel} from '@/axios/api'
import {majormanageUp} from '@/axios/api'
import {majormanageAdd} from '@/axios/api'
import {formatDate} from '@/common/js/date'
  export default {
    data() {
      return {
        pageIndex:1,
        pageSize:10,
        total:100,
        tableData: [],
        dialogVisibleUp:false,
        AddMajorVisible:false,
        form:{
            majorAcademic:'',
            majorProfile:''
        },
        formInline: {
        condition:''
        },
        ruleForm2:{

          majorAcademic:'',
          majorTotalCredit:'',
          majorProfile:''
        },
        rules2: {

          majorAcademic: [
            { required: true,message:"请输入内容", trigger: 'blur' }
          ],
          majorTotalCredit: [
            { required: true,message:"请输入内容", trigger: 'blur' }
          ],
          majorProfile: [
            { required: true,message:"请输入内容", trigger: 'blur' }
          ]
        },
      }
    },
    methods:{
      majorList(){
        console.log(this.formInline.condition);
        let params={pageIndex:this.pageIndex,condition:this.formInline.condition}
        majormanageFy(params).then(res =>{
          console.log(res);
          this.tableData=res.resData.list;
          this.pageSize=res.resData.pageSize;
          this.total=res.resData.total;
        })
      },
      onSubmit() {

        this.majorList();
      },
      handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       let params = {pageIndex:val,condition:this.formInline.condition};
       majormanageFy(params).then(res =>{
         console.log(res);
       this.tableData =  res.resData.list;

       })
     },
     /**
      * 添加专业
      * @param  {[type]} formName [description]
      * @return {[type]}          [description]
      */
     submitFormAdd(formName) {
       console.log( this.$refs[formName]);
       this.$refs[formName].validate((valid) => {
         if (valid) {
           //alert('submit!');
           console.log(this.ruleForm2);
           this.AddMajorVisible=false;
           this.majormanageAdd1();
         } else {
           console.log('error submit!!');
           return false;
         }
       });
     },
     majormanageAdd1(){
       let params={
                   majorAcademic:this.ruleForm2.majorAcademic,
                   majorTotalCredit:this.ruleForm2.majorTotalCredit,
                   majorProfile:this.ruleForm2.majorProfile
       }
       console.log(params);
       majormanageAdd(params).then(res =>{
         console.log(res);
         if (res.status == 200) {
           this.majorList()
           this.$message({
             message: res.message,
             type: 'success'
           });
         }
       })
     },
     /*日期格式化*/
      dateFormat(row, column) {
        var date = row[column.property];
        //console.log(date);
        return formatDate(new Date(date), 'yyyy-MM-dd');
      },
     /**
      * 修改
      * @param  {[type]} id [description]
      * @return {[type]}    [description]
      */
     majormanageSelid(id){
       let param={majorId:id}
       majormanageSel(param).then(res =>{
         console.log(res);
         this.form.majorAcademic=res.resData.majorAcademic;
         this.form.majorProfile=res.resData.majorProfile;
         this.dialogVisibleUp=true;
       })
     },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
          // alert('submit!');
           this.majormanageUpid();
           this.dialogVisibleUp=false;
         } else {
           console.log('error submit!!');
           return false;
         }
       });
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
     },
     majormanageUpid(){
       let params={
         majorAcademic:this.form.majorAcademic,
         majorProfile:this.form.majorProfile,
       }
       console.log(params);
       majormanageUp(params).then(res =>{
         console.log(res);
         if (res.status == 200) {
           this.$message({
             message: res.message,
             type: 'success'
           });
         }
       })
     },
     /**
      * 根据id删除
      * @param  {[type]} id [description]
      * @return {[type]}    [description]
      */
     majormanageDelid(id){
       let param={majorId:id}
       majormanageDel(param).then(res =>{
         console.log(res);
      // alert(id);
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           if(res.status==200){
             this.majorList()
             this.$message({
               type: 'success',
               message: '删除成功!'
             });
           }
         }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消删除'
           });
         });
       })
     }
    },
    mounted(){
      this.majorList()
    }
  }
</script>
